<template>
  <div class="bg">

    <el-row :gutter="10">
      <el-col :span="16">
        <div class="box">
          <ModuleHeader :title="'近七日负面信息热力图'"/>
          <div class="box_div">
            <InformationHeatMapOfTenantCode/>
          </div>
        </div>

      </el-col>
      <el-col :span="8">

        <div class="box">
          <ModuleHeader :title="'媒体活跃度排行'"/>
          <div class="box_div">
            <div v-for="item in mediaActivity">
              <span>{{ item.name }}({{ item.value }})</span>
              <el-progress :percentage="maxMediaActivity==0?0:parseFloat((item.value*100/maxMediaActivity).toFixed(1))"
                           :format="formatPercentage"></el-progress>
            </div>
          </div>
        </div>

      </el-col>
    </el-row>


    <el-row :gutter="10">
      <el-col :span="16">
        <div class="box">
          <ModuleHeader :title="optionTitleTextEmotional"/>
          <div class="box_div">
            <line-chart :height="height"
                        :optionSeries="optionSeriesEmotional"
                        :optionXAxisData="optionXAxisDataEmotional"
                        :optionTitleText="''"
                        :optionLegend="optionLegendEmotional"
                        @clickEvent="clickEmotionalQuShiEvent"
            />
          </div>
        </div>


      </el-col>
      <el-col :span="8">
        <div class="box">
          <ModuleHeader :title="'意见领袖排行'"/>
          <div class="box_div">
            <div v-for="item in opinionLeaders">
              <span>{{ item.name }}({{ item.value }})</span>
              <el-progress
                :percentage="maxOpinionLeaders==0?0:parseFloat((item.value*100/maxOpinionLeaders).toFixed(1))"
                :format="formatPercentage"></el-progress>
            </div>
          </div>
        </div>

      </el-col>
    </el-row>



      <el-row :gutter="10">

        <el-col :span="12">
          <div class="box">
            <ModuleHeader :title="'热词云图'"/>
            <div class="box_div">
              <word-cloud :hots="hotWords" :height="height" @clickEvent="clickEvent"
                          :optionTitleText="''"
              />
            </div>
          </div>


        </el-col>

        <el-col :span="12">

          <div class="box">
            <ModuleHeader :title="'热门信息'"/>
            <div class="box_div">
              <div v-for="(item,index) in hots" :key="index">
                <div style="  border-bottom: 1px solid #DCDFE6;padding:  5px 0">
                  <div style="display: flex;">
                    <div style="margin-right: 10px">
                      <el-avatar :size="20" v-if="item.isnegative === 1" style="background-color: #F56C6C"> 负
                      </el-avatar>
                      <el-avatar :size="20" v-if="item.isneutral === 1" style="background-color: #545454"> 中
                      </el-avatar>
                      <el-avatar :size="20" v-if="item.ispositive === 1" style="background-color: green"> 正
                      </el-avatar>
                    </div>
                    <div class="article-title" @click="GotoDetail(item.id)">
                      {{clearHtml(item.title)}}
                    </div>
                  </div>
                  <div
                    style="font-size: 12px !important;color: #999;display: flex; justify-content: space-between; align-items: center;">
                    <div>
                      {{item.publishTime}}
                    </div>
                    <div>
                      {{item.siteName}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </el-col>
      </el-row>



  </div>


</template>

<script>
  import CountTo from 'vue-count-to'
  import WordCloud from '@/components/Echarts/WordCloud'
  import RadarChart from '@/components/Echarts/RadarChart'
  import MapWorldChart from '@/components/Echarts/MapWorldChart'
  import LineChart from '@/components/Echarts/LineChartNew'
  import PieChart from '@/components/Echarts/PieChartNew'
  import InformationHeatMapOfTenantCode from '@/components/Custom/InformationHeatMapOfTenantCode'
  import {
    getSentimentByPublishTimeByTenantCode, getHotWords, mostActiveMedia,
    getHotListOfTenantCode,
    getOpinionLeaders
  } from "@/api/analysis/statistic";
  import ModuleHeader from '@/views/components/ModuleHeader'

  require('@/components/Echarts/spider') // echarts theme

  export default {
    name: 'Home',
    components: {
      CountTo,
      WordCloud,
      RadarChart,
      MapWorldChart,
      LineChart,
      InformationHeatMapOfTenantCode,
      PieChart,
      ModuleHeader
    },
    data() {
      return {
        hots: [],
        optionSeriesEmotional: [],
        optionXAxisDataEmotional: [],
        optionLegendEmotional: ["正面", "中性", "负面"],
        optionTitleTextEmotional: '正负面信息趋势图',

        maxOpinionCountChina: 0,
        chinaOpinions: [],
        maxOpinionCount: 0,
        worldOpinions: [],
        height: "460px",
        mediaActivity: [],
        maxMediaActivity: 1,
        opinionLeaders: [],
        maxOpinionLeaders: 1,
        showSelectData: false,
        value1: '',
        timeType: 'week',
        beginPublishDay: null,
        endPublishDay: null,
        dateList: [],
        mediaTypeList: [],
        hotWords: [{name: "暂无数据", value: 1}]
      }
    },

    methods: {
      getHotWordsSystem() {
        getHotWords().then(res => {
          if (res.data.length > 0) {
            this.hotWords = res.data;
          } else {
            this.hotWords = [{name: "暂无数据", value: 1}];
          }
          console.log("this.hotWords", this.hotWords)
        })
      },

      getSentimentByPublishTimeByTenantCode() {
        getSentimentByPublishTimeByTenantCode().then(res => {
          this.optionSeriesEmotional = []
          this.optionXAxisDataEmotional = []
          let list = res.rows
          let zm = {
            name: '正面',
            type: 'line',
            smooth: true,
            data: [],
            lineStyle: {
              "color": "green",
              // "width": 4,
              // "type": "dashed"
            },
          }
          let zx = {
            name: '中性',
            type: 'line',
            smooth: true,
            data: [],
            lineStyle: {
              "color": "gray",
            },
          }
          let fm = {
            name: '负面',
            smooth: true,
            type: 'line',
            data: [],
            lineStyle: {
              "color": "red",
            },
          }
          let zmlist = []
          let zxlist = []
          let fmlist = []
          list.forEach(item => {
            this.optionXAxisDataEmotional.push(item.name);
            let zmnum = 0
            let zxnum = 0
            let fmnum = 0
            item.value.forEach(i => {
              if (i.name == 'ispositive') {
                zmnum = i.value
              }
              if (i.name == 'isneutral') {
                zxnum = i.value
              }
              if (i.name == 'isnegative') {
                fmnum = i.value
              }
            })
            zmlist.push(zmnum)
            zxlist.push(zxnum)
            fmlist.push(fmnum)
          })
          zm.data = zmlist
          zx.data = zxlist
          fm.data = fmlist
          this.optionSeriesEmotional.push(zm)
          this.optionSeriesEmotional.push(zx)
          this.optionSeriesEmotional.push(fm)

        })
      },

      clickEmotionalQuShiEvent(parameters) {
        this.$router.push({
          path: '/opinion/list', query: {
            timeType: this.timeType,
            timeType: 'define',
            beginPublishDay: parameters.x,
            endPublishDay: parameters.x,
            value1: [parameters.x, parameters.x],
            selectEmotion: parameters.name
          }
        });
      },
      formatPercentage(percentage) {
        return percentage === 100 ? '' : '';
      },

      GotoDetail(id) {
        this.$router.push({path: '/opinion/detail', query: {id: id}});
      },
      mostActiveMedia() {
        let param = {
          timeType: this.timeType,
          beginPublishDay: this.value1 != null ? this.value1[0] : null,
          endPublishDay: this.value1 != null ? this.value1[1] : null,
        };

        mostActiveMedia(param).then(response => {
          this.mediaActivity = []
          response.data.forEach((item, index) => {
            if (index === 0) {
              this.maxMediaActivity = item.value
            }
            if (index < 9) {
              this.mediaActivity.push(item);
            }
          })
        })
      },
      getOpinionLeaders() {
        let param = {
          timeType: this.timeType,
          beginPublishDay: this.value1 != null ? this.value1[0] : null,
          endPublishDay: this.value1 != null ? this.value1[1] : null,
        };

        getOpinionLeaders(param).then(response => {
          this.opinionLeaders = []
          response.data.forEach((item, index) => {
            if (index === 0) {
              this.maxOpinionLeaders = item.value
            }
            if (index < 9) {
              this.opinionLeaders.push(item);
            }
          })
        })
      },
      clickEvent(paramName) {
        this.$router.push({
          path: '/opinion/list', query: {
            timeType: this.timeType,
            beginPublishDay: this.beginPublishDay,
            endPublishDay: this.endPublishDay,
            keywords: paramName
          }
        });
      },
      getHotListOfTenantCode() {
        getHotListOfTenantCode({count: 7}).then(response => {
          this.hots = response.data
        })
      },

    },
    created() {

    },
    mounted() {
      this.mostActiveMedia();
      this.getOpinionLeaders();
      this.mostActiveMedia();
      this.getOpinionLeaders();
      this.getSentimentByPublishTimeByTenantCode()
      this.getHotWordsSystem()
      this.getHotListOfTenantCode()
    }
  }
</script>

<style lang="scss" scoped>

  .bg {
    background-color: #eeeeee;

    .chart-wrapper {
      width: 100%;
      margin-bottom: 10px;
    }
  }

  .box {
    background-color: white;
    margin-bottom: 10px;
  }

  .box_div {
    height: 380px;
    padding: 20px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
  }

  .article-title {
    cursor: pointer;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: 100%;
    color: #1e1e1e
  }

</style>




